<div class="act">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="http://images.shopin.net/2014/images/shopin_card/focus_3.jpg"
        />
      </div>
      <div class="swiper-slide">
        <img src="http://images.shopin.net/2014/images/shopin_card/focus_4.jpg"
        />
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</div>
<div class="bott">
  <div class="box">
    <div class="bot_t">
      <img src="http://images.shopin.net/2014/images/shopin_card/detail.png?version=3334"
        alt=""
      />
    </div>
    <div class="bot_b">
      <div class="main">
        <img src="http://images.shopin.net/2014/images/shopin_card/card_1_1.jpg?version=3223"
          alt=""
        />
        <span>￥200</span>
        <button>立即购买</button>
      </div>
    </div>
  </div>
  <div class="pic">
      <ul>
          <li><img src="http://images.shopin.net/2014/images/shopin_card/state_1.jpg?version=3223" alt=""></li>
          <li><img src="http://images.shopin.net/2014/images/shopin_card/state_2.jpg?version=3223" alt=""></li>
          <li><img src="http://images.shopin.net/2014/images/shopin_card/state_3.jpg?version=3223" alt=""></li>
          <li><img src="http://images.shopin.net/2014/images/shopin_card/state_4.jpg?version=3223" alt=""></li>
          <li><img src="http://images.shopin.net/2014/images/shopin_card/state_5.jpg?version=3223" alt=""></li>
      </ul>
  </div>
</div>
<script src="./javascripts/jQuery.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script> -->

<script>
  //  swiper 大轮播图
  var mySwiper = new Swiper(".swiper-container", {
    autoplay: true,
    loop: true,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    //   renderBullet: function (index, className) {
    //     return '<span class="' + className + '">' + (index + 1) + "</span>";
    //   },
    },
  });
  //   数据渲染
  $(function () {
    $.ajax({
      url: "./json/act.json",
    }).then(function (res) {
      render(res.datas);
    });
    function render(list) {
      $(".bot_b").html(
        list
          .map(
            (item) => `
            <div class="main">
                <img src="${item.image}" alt=""/>
                <span>￥${item.price}</span>
                <button>立即购买</button>
                
            </div>`
          )
          .join("")
      );
    }
  });
    // // 懒加载
    // $(function () {
    //     $(".lazy").lazyload();
    //   });
</script>
